<!DOCTYPE html>
<html>
<head>
  <title>机蜂云后台登录</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <script src="/layui/layui.js"></script>
  <script src="/layui/jquery.min.js"></script>
  <style>
    .main{
      height: 100vh;
      width: 100vw;
      overflow: hidden;
      background: url("/images/login-bg.jpg") no-repeat center/cover;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .main .content{
      height: 40vh;
      width: 30vw;
      background-color: rgba(255,255,255,.3);
      border-radius: 20px;
    }
    .main .content .title{
      height: 10vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .main .content .form-group{
      width: 90%;
      margin: 0 auto;
    }
  </style>
</head>
<body>
<div class="main">
  <div class="content">
    <div class="title"><h2>机蜂云后台登录</h2></div>
    <div class="form-group">
      <form class="layui-form">
        <div class="layui-form-item">
          <label for="username" class="layui-form-label">用户名</label>
          <div class="layui-input-block">
            <input type="text" class="layui-input" autocomplete="off" id="username" name="username" placeholder="请输入用户名" lay-verify="required">
          </div>
        </div>
        <div class="layui-form-item">
          <label for="password" class="layui-form-label">密码</label>
          <div class="layui-input-block">
            <input type="password" class="layui-input" id="password" lay-verify="required" name="password" placeholder="请输入密码">
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button lay-submit lay-filter="login" class="layui-btn">登录</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
</body>
<script>
  layui.use(['form'],function () {
    /*加载layui的表单模块*/
    const form = layui.form;
    /*箭头提交按钮*/
    form.on("submit(login)",function (data) {
      $.ajax({
        url:"/login",
        method:"post",
        data:data.field,
        dataType:"json",
        success(res){
          if(res.code === 200){
            layer.msg("登录成功",{icon:6})
            location.replace("/home")
          }else{
            layer.alert(res.msg,{icon:5});
          }
        },
        error(e){
          layer.alert("与服务器断开连接...");
          console.log(e);
        }
      })
      /*阻止默认的表单提交*/
      return false;
    });
  });
</script>
</html>
